<template>
  <div class="form">
    <el-dialog
      :visible.sync="dialogFormVisible"
      :title="type == 2 ? '修改商品' : '添加商品'"
      width="70%"
      @close="cancel"
    >
      <el-form style="width: 100%" :model="params" :rules="rules" ref="formRef">
        <el-form-item label-width="100px" label="所属分类" prop="category_ids">
          <el-cascader
            placeholder="请选择分类"
            size="mini"
            :options="categoryList"
            v-model="category_ids"
            :props="categoryProps"
            filterable
            :style="{ width: '500px' }"
            @change="categoryChange"
          ></el-cascader>
          <div class="form-tip">提示：当前商品所属分类，可多选</div>
        </el-form-item>
        <el-form-item label="商品名称" label-width="100px" prop="name">
          <el-input
            style="width: 500px"
            placeholder="请输入商品名称"
            v-model="params.name"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="封面图" label-width="100px" prop="cover_image">
          <!-- 选择文件 -->
          <attachment-select-btn
            name="cover_image"
            :dataList="params.cover_image"
            @confirm="fileConfirm"
          >
          </attachment-select-btn>
          <div class="form-tip">提示：图片大小请勿超过300KB</div>
        </el-form-item>
        <el-form-item label="品牌" label-width="100px" prop="brand_id">
          <!-- 选择品牌 -->
          <select-brand
            :list="selectBrand"
            :idList="brandIds"
            @confirm="brandConfirm"
          ></select-brand>
          <div class="form-tip">提示：当前商品所属的品牌</div>
        </el-form-item>
        <el-form-item
          label="品牌类目"
          label-width="100px"
          prop="brand_category_id"
          v-if="params.brand_id"
        >
          <!-- 选择品牌类目 -->
          <select-brand
            :type="2"
            :list="selectBrandCategory"
            :idList="brandCategoryIds"
            :brandId="params.brand_id"
            @confirm="brandCategoryConfirm"
          ></select-brand>
          <div class="form-tip">提示：当前商品所属品牌类目</div>
        </el-form-item>
        <el-form-item label="商品规格" label-width="100px" prop="spec">
          <spec ref="spec" @specOperation="specOperation"></spec>
        </el-form-item>
        <el-form-item
          label="详情轮播图"
          label-width="100px"
          prop="detail_images"
        >
          <!-- 选择文件 -->
          <attachment-select-btn
            :number="10"
            name="detail_images"
            :dataList="params.detail_images"
            @confirm="fileConfirm"
          >
          </attachment-select-btn>
          <div class="form-tip">
            提示：请勿超过10张，每张图片大小请勿超过300KB
          </div>
        </el-form-item>
        <el-form-item
          label="详情介绍图"
          label-width="100px"
          prop="introduce_images"
        >
          <!-- 选择文件 -->
          <attachment-select-btn
            :number="40"
            name="introduce_images"
            :dataList="params.introduce_images"
            @confirm="fileConfirm"
          >
          </attachment-select-btn>
          <div class="form-tip">
            提示：请勿超过40张，每张图片大小请勿超过300KB
          </div>
        </el-form-item>
        <el-form-item label="排序" label-width="100px" prop="sort">
          <el-input
            style="width: 500px"
            placeholder="请输入商品排序"
            v-model="params.sort"
            size="small"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" label-width="100px">
          <el-radio v-model="params.status" :label="1">上架</el-radio>
          <el-radio v-model="params.status" :label="2">下架</el-radio>
        </el-form-item>
      </el-form>
      <!-- 具名插槽 -->
      <template #footer>
        <el-button @click="cancel" size="mini">取消</el-button>
        <el-button type="primary" @click="submit" size="mini">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export { default } from "./data.js"
</script>

<style lang="scss" scoped>
.el-cascader {
  flex: 1;
}
</style>
